<template>
    <div class="guide hasFoot ">
        <HeaderNav3 :activeIndex="activeIndex"></HeaderNav3>
        <Contact></Contact>
        <Ad></Ad>
        <div class="guide-img">
            <img :src="require('../../static/images/guide1.png')" alt="">
            <img :src="require('../../static/images/guide2.png')" alt="">
            <img :src="require('../../static/images/guide3.png')" alt="">
        </div>
        <div class="guide-item wrap">
            <h1>
                按揭貸款一計算每期供款額
            </h1>
            <div class="text">
                請輸入一下資料，即可計算出物業按揭的每月供款額
            </div>
            <div class="item-hr"></div>
            <label>
                <span>貸款金額：</span>
                <input onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" 
                    
                    maxlength="15"
                    v-model="loan"
                >&nbsp 元
            </label>
            <label>
                <span>年利率：</span>
                <input  onkeyup="if(isNaN(value))execCommand('undo')"       onafterpaste="if(isNaN(value))execCommand('undo')"
                        maxlength="8"
                        v-model="rate"

                >&nbsp %
            </label>
            <label>
                <span>供款年期：</span><input  maxlength="2" v-model="period">&nbsp 年
            </label>
            <label>
                <span>每月供款額：</span><div><p>{{result}}</p></div>
            </label>
            <div class="btn">
                <div class="btn2" @click="compute">
                    計算
                </div>
                 <div class="btn2" @click="clear">
                    從新輸入
                </div>
            </div>
        </div>
    </div>
        
</template>

<script>
import HeaderNav3 from "@/components/HeaderNav3.vue"
import Contact from '@/components/Contact.vue'
import Ad from '@/components/Ad.vue'

export default {
	components:{
        Contact,
        Ad,
        HeaderNav3
	},
    computed:{
        
        },
    activated(){ 
        this.$store.commit("IS_SHOW_ALERT",true)
    },   
    data(){
       return{
          loan:"",
          rate:"",
          period:"",
          result:"",
          "activeIndex":"7",   
       }
    },
    methods:{
        compute() {
          let term  = 1 + this.rate*0.01/12;
          let fterm = 1 + this.rate*0.01/12;
          let mpay, nterm;
          for (let i = 1; i < this.period*12; i++) {
              fterm = fterm * term;
          }
         
          mpay=(this.loan*this.rate*0.01/12) * fterm / (fterm - 1);
          this.result="$"+this.formatNum2(Math.round(mpay).toFixed(2));
          // console.log(this.result)
        },
        formatNum2(num) {
            return (num).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        },
        clear(){
            this.loan="";
            this.rate="";
            this.period="";
            this.result="";
        },
    },
    mounted(){ 

       
    },
}
</script>
<style lang="scss">
    @import "../style/guide";
</style>